<!-- 预览 -->
<template>
  <div class="add">
    <div class="pageHeader">
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span>预览商户</span>
    </div>

    <!-- 商户基本详情 -->
    <div class="column-form">
      <div class="title">商户基本详情</div>
      <myForm :formConfig="formConfig1" :formData="form" :labelWidth="labelWidth" :formInline="formInline"
        ref="addForm1">
        <!-- 地图位置 -->
        <template slot="lnglat">
          <Amap :defaultLnglat="defaultLnglat" ref="Amap" />
        </template>

        <!-- 门店logo -->
        <template slot="logoImage">
          <img :src="form.logoImage" alt style="width:180px;" />
        </template>

        <!-- 门店介绍图 -->
        <template slot="descImage">
          <img :src="form.descImage" style="width:150px;" />
        </template>
      </myForm>
    </div>
    <!-- 商户认证信息 -->
    <div class="column-form">
      <div class="title">商户认证信息</div>
      <myForm :formConfig="formConfig2" :formData="form" :labelWidth="labelWidth" :formInline="formInline"
        ref="addForm2">
        <!-- 营业执照 -->
        <template slot="licenceImage">
          <img :src="form.licenceImage" style="width:220px;" />
        </template>

        <!-- 法人身份证照 -->
        <template slot="legalImage">
          <div class="idCard">
            <div>
              <img :src="form.legalFrontImage" style="width:200px" />
              <p>上传法人身份证人像面</p>
            </div>
            <div>
              <img :src="form.legalBackImage" style="width:200px" />
              <p>上传法人身份证国徽像面</p>
            </div>
          </div>
        </template>
      </myForm>
    </div>
    <!-- 商户财务信息 -->
    <div class="column-form">
      <div class="title">商户财务信息</div>
      <myForm :formConfig="formConfig3" :formData="form" :labelWidth="labelWidth" :formInline="formInline"
        ref="addForm3">
      </myForm>
    </div>
    <div style="text-align: center;">
      <el-button type="primary" size="mini" @click="submit()" v-if="id == undefined">提交</el-button>
      <el-button type="primary" size="mini" @click="goBack()" v-else>返回</el-button>
    </div>
  </div>
</template>

<script>
import { queryById } from "@/api/merchantManagement";
import Amap from "./amap.vue";
export default {
  components: { Amap },
  name: "Preview",
  data() {
    return {
      formInline: false,
      labelWidth: "100px",
      form: {},
      formConfig1: [
        {
          label: "商户名称",
          prop: "name",
          type: "div",
          placeholder: "请输入商户名称",
          rules: [
            { required: true, message: "请输入商户名称", trigger: "blur" }
          ]
        },
        {
          label: "行业类别",
          prop: "industryCategory",
          type: "div",
          options: [],
          rules: [
            { required: true, message: "请选择行业类别", trigger: "change" }
          ]
        },
        {
          label: "经营地区",
          prop: "area",
          type: "div",
          rules: [
            { required: true, message: "请选择经营地区", trigger: "change" }
          ]
        },
        {
          label: "详细地址",
          prop: "address",
          type: "div",
          placeholder: "请输入详细地址",
          rules: [
            { required: true, message: "请输入详细地址", trigger: "blur" }
          ]
        },
        {
          label: "地图位置",
          slotName: "lnglat",
          prop: "lnglat",
          rules: [
            { required: true, message: "请选择地图位置", trigger: "change" }
          ]
        },
        {
          label: "门店logo",
          slotName: "logoImage",
          prop: "logoImage",
          rules: [
            { required: true, message: "请上传门店logo", trigger: "change" }
          ]
        },
        {
          label: "营业时间",
          prop: "time",
          type: "div",
          rules: [
            { required: true, message: "请选择营业时间", trigger: "change" }
          ]
        },
        { label: "门店介绍图", slotName: "descImage" },
        {
          label: "简介/特色",
          prop: "description",
          type: "div",
          placeholder: "",
          maxlength: 140
        }
      ],
      formConfig2: [
        {
          label: "营业执照号",
          prop: "licenceCode",
          type: "div",
          placeholder: "请输入营业执照号",
          rules: [
            { required: true, message: "请输入营业执照号", trigger: "blur" }
          ]
        },
        {
          label: "营业执照",
          prop: "licenceImage",
          slotName: "licenceImage",
          rules: [
            { required: true, message: "请上传营业执照", trigger: "change" }
          ]
        },
        {
          label: "法人姓名",
          prop: "legalName",
          type: "div",
          placeholder: "请输入法人姓名",
          rules: [
            { required: true, message: "请输入法人姓名", trigger: "blur" }
          ]
        },
        {
          label: "法人身份证号",
          prop: "legalNum",
          type: "div",
          placeholder: "请输入法人身份证号",
          rules: [
            { required: true, message: "请输入法人身份证号", trigger: "blur" }
          ]
        },
        {
          label: "法人身份证照",
          prop: "legalImage",
          slotName: "legalImage",
          rules: [
            { required: true, message: "请上传法人身份证照", trigger: "change" }
          ]
        },
        {
          label: "联系人电话",
          prop: "legalTel",
          type: "div",
          placeholder: "请输入联系人电话",
          rules: [
            { required: true, message: "请输入联系人电话", trigger: "blur" }
          ]
        }
      ],
      formConfig3: [
        {
          label: "开户银行名称",
          prop: "bankName",
          type: "div",
          placeholder: "请输入开户银行名称",
          rules: [
            { required: true, message: "请输入营业执照号", trigger: "blur" }
          ]
        },
        {
          label: "开户支行名称",
          prop: "branchName",
          type: "div",
          placeholder: "请输入开户银行名称",
          rules: [
            { required: true, message: "请输入开户支行名称", trigger: "blur" }
          ]
        },
        {
          label: "结算账户类型",
          prop: "settlementTypeName",
          type: "div",
          rules: [
            {
              required: true,
              message: "请选择结算账户类型别",
              trigger: "change"
            }
          ]
        },
        {
          label: "银行账号",
          prop: "accountNum",
          type: "div",
          placeholder: "请输入银行账号",
          rules: [
            { required: true, message: "请输入银行账号", trigger: "blur" }
          ]
        },
        {
          label: "账号开户名",
          prop: "accountName",
          type: "div",
          placeholder: "请输入账号开户名",
          rules: [
            { required: true, message: "请输入账号开户名", trigger: "blur" }
          ]
        }
      ],
      defaultLnglat: [114.268691, 30.401227],
      id: this.$route.query.id
    };
  },
  mounted() {
    if (this.id != undefined) {
      this.queryById();
    }
    this.$refs.Amap.init();
  },
  methods: {
    // 返回
    goBack() {
      if (this.id != undefined) {
        this.$router.push("/merchantManagement");
      } else {
        this.$emit("setActvie", "Add");
      }
    },
    // 查询详情
    queryById() {
      queryById({ id: this.id }).then(res => {
        this.form = res.data;
        const {
          province,
          city,
          county,
          lng,
          lat,
          startTime,
          endTime
        } = res.data;
        this.form.area = province + "/" + city + "/" + county;
        this.form.time = startTime + "-" + endTime;
        this.defaultLnglat = [lng, lat];
      });
    },
    //预览
    submit() { }
  }
};
</script>

<style scoped lang="scss">
.add {
  .pageHeader {
    font-size: 18px;
    font-weight: 550;
    margin-bottom: 10px;

    i {
      margin-right: 10px;
      cursor: pointer;
    }
  }

  .column-form {
    background: #f8f9fb;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 24px;

    ::v-deep .el-input__inner {
      max-width: 500px;
    }

    ::v-deep .el-textarea__inner {
      max-width: 700px;
      height: 100px;
    }

    .idCard {
      display: flex;

      >div {
        margin-right: 50px;

        p {
          text-align: center;
          font-size: 12px;
          color: #027db4;
        }
      }
    }
  }

  .preview-cls {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    margin: 24px auto;
    width: 120px;
    padding: 10px 20px;
    color: #fff;
    font-weight: 16px;
    font-weight: 500;
    text-align: center;
    border-radius: 8px;
    background-color: blue;
  }

  ::v-deep #map-container {
    width: 600px !important;
    height: 300px !important;
  }
}
</style>